<template>
  <div>
    <el-container>
      <!--头部-->
      <el-header style="background-color: #81c9f1; height: 75px;background-position: center">
        <el-row style="height: 100%;width: 100%">
          <el-col :span="3">
            <a href="/home" style="display: block">
              <img src="/img/syc.jpg" style="float: left;margin-left:20px;width: 150px">
            </a>
          </el-col>
          <el-col :span="16">
            <h1>注册</h1>
          </el-col>
          <el-col :span="5">
                    <span style="float: right; margin-right: 20px;line-height: 70px;color: #4a4a4a;
                    font-family: '微软雅黑 Light'">已有帐号？
                        <a href="/login/user" style="text-decoration: none;color:#81c9f1">立即登录</a></span>
          </el-col>
        </el-row>
      </el-header>

      <!--主体-->
      <el-main style="margin-top:40px;background-position: center;padding:0;">
        <el-card style="height:560px;width: 500px;margin: 80px auto;border: 1px">
          <h1 style="margin-left: 20px">用户注册</h1>
          <!--下方输入框-->
          <el-form :model="user" :rules="userRules" ref="user" label-width="" class="demo-ruleForm">
            <!--检测输入用户名-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="username">
              <el-input  v-model="user.username" placeholder="请输入用户名">
                <template slot="prepend">
                  <i class="el-icon-user-solid"></i>
                </template>
              </el-input>
            </el-form-item>

            <!--检测输入密码-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="password">
              <el-input type="password" v-model="user.password" placeholder="请输入密码">
                <template slot="prepend">
                  <i class="el-icon-lock"></i>
                </template>
              </el-input>
            </el-form-item>

            <!--检测输入验证密码-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="repassword">
              <el-input type="password" v-model="user.repassword" placeholder="请重新输入密码">
                <template slot="prepend">
                  <i class="el-icon-lock"></i>
                </template>
              </el-input>
            </el-form-item>


            <!--检测输入手机号-->
<!--            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="phone">
              <el-input type="phone" v-model="user.phone" placeholder="请输入手机号">
                <template slot="prepend">
                  <i class="el-icon-phone-outline"></i>
                </template>
              </el-input>
            </el-form-item>-->

            <!--输入昵称-->
<!--            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="nickname">
              <el-input type="text" v-model="user.nickname" placeholder="请输入昵称">
                <template slot="prepend">
                  <i class="el-icon-user"></i>
                </template>
              </el-input>
            </el-form-item>-->

            <el-form-item>
              <input type="checkbox" v-model="user.agreement" style="margin-left: 30px">
              <span style="font-size: 10px;color: #666666;left: 25px">我已阅读并接受安心陪诊 《用户协议》 《隐私政策》</span>
            </el-form-item>

            <el-form-item>
              <el-button style="width: 400px;margin-left: 30px" :disabled="!user.agreement" type="primary" @click="submitUserForm('user')">立即创建</el-button>
            </el-form-item>
          </el-form>
          <div align="center">
            <!--        <br>-->
            <!--        <a href="/reg/doctor" style="text-decoration: none;color: #69bb55"><button class="switch" style="cursor: pointer">转到医生注册界面</button></a>-->
            <span style="text-align: center; margin-top: 50px;font: 12px '微软雅黑 Light';color:#81c9f1;display: block">
                        遇到问题，请关注微信公众号留言</span>
          </div>
        </el-card>
      </el-main>


    </el-container>
  </div>
</template>
<script>
import qs from "qs";
import BaseUrl from "@/http/BaseUrl";

export default {
  data(){
    return {
      radio: '1',
      user: {username:"", password:"", nickname:"", repassword:"",phone: "",agreement:false},
      userRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur'  },
          { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' },
          {  message: '密码必须位数字，字母，特殊符号的组合', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请重新输入密码', trigger: 'blur' },
          {
            validator: this.validateUserRepassword,
            trigger: "blur",
          }
        ],
        nickname:[]
      }
    }
  },
  methods: {
    submitUserForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = BaseUrl.PASSPORT+'/passport/staffs/reg';
          console.log('url='+url);
          // 只传递需要的属性
          const requestData = {
            username: this.user.username,
            password: this.user.password,
            nickname: this.user.nickname,
            phone: this.user.phone
          };

          const formData = qs.stringify(requestData);

          this.axios.post(url,formData,{
            headers:{
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((response)=>{
            let jsonResult=response.data;
            if(jsonResult.state===20000){
              this.$message({
                message:'注册成功',type:'success'
              });

              location.href='/login';
            }else{
              this.$message.error(response.data.message);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 自定义校验规则，验证密码和确认密码是否一致
    validateUserRepassword(rule, value, callback) {
      if (value !== this.user.password) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    },
  },
  created() {
  },
  mounted() {

  }
}
</script>
<style>
body{
  margin: 0 auto;
}
body{
  background-image: linear-gradient(to bottom right,#0aa1ed, #81c9f1);
  background-repeat: no-repeat;
  height: 100vh;
}
h1{
  margin-left: 20px;
  font: 24px -apple-system;
  color: #333333;
  line-height: 40px;
}
.switch{
  color: #81c9f1;
  font: 12px "微软雅黑 Light";
  text-decoration: none;
  display: block;
  height: 35px;
  border: 1px solid #81c9f1;
  background-color: transparent;
  border-radius: 10px;
}

</style>
